﻿@page "/components/timepicker"
@page "/components/time-picker"

<PageOutlet Url="components/timepicker"
            Title="TimePicker"
            Description="TimePicker component of the bit BlazorUI components" />

<DemoPage Name="TimePicker"
          Description="A BitTimePicker offers a drop-down control that’s optimized for picking a single time from a clock view where contextual information like the day of the week or fullness of the calendar is important. You can modify the calendar to provide additional context or to limit available times."
          Parameters="componentParameters"
          SubEnums="componentSubEnums"
          SubClasses="componentSubClasses"
          GitHubUrl="Inputs/TimePicker/BitTimePicker.razor"
          GitHubDemoUrl="Inputs/TimePicker/BitTimePickerDemo.razor">
    <DemoExample Title="Basic" RazorCode="@example1RazorCode" Id="example1">
        <div>Explore the basic usage of the BitTimePicker component, including a disabled state and a placeholder option.</div>
        <br />
        <div class="example-content">
            <BitTimePicker Label="Basic TimePicker" />
            <br /><br />
            <BitTimePicker Label="Disabled" IsEnabled="false" />
            <br /><br />
            <BitTimePicker Label="Required" Required />
            <br /><br />
            <BitTimePicker Label="Placeholder" Placeholder="Select a time..." />
        </div>
    </DemoExample>

    <DemoExample Title="Time format" RazorCode="@example2RazorCode" Id="example2">
        <div>Use of different time formats in the BitTimePicker, specifically the 12-hour (AM/PM) and 24-hour formats.</div>
        <br />
        <div class="example-content">
            <BitTimePicker TimeFormat="BitTimeFormat.TwelveHours"
                           Placeholder="Select a time..."
                           Label="12 hours (AM/PM)" />
            <br />
            <BitTimePicker TimeFormat="BitTimeFormat.TwentyFourHours"
                           Placeholder="Select a time..."
                           Label="24 hours" />
        </div>
    </DemoExample>

    <DemoExample Title="Text input" RazorCode="@example3RazorCode" Id="example3">
        <div class="example-desc">
            The input field will open the BitTimePicker, and clicking the field again will dismiss the BitTimePicker and
            allow text input. Please note to use this feature, you must enter the time in the exact <code>TimeFormat</code> provided for the BitTimePicker.
        </div>
        <div class="example-content">
            <BitTimePicker AllowTextInput Label="Start time" />
        </div>
    </DemoExample>

    <DemoExample Title="Icon" RazorCode="@example4RazorCode" Id="example4">
        <div>Customize the icon of the BitTimePicker, including placing the icon on either the left or right side.</div>
        <br />
        <div class="example-content">
            <BitTimePicker IconName="@BitIconName.HourGlass" Placeholder="Select a time..." />
            <br />
            <BitTimePicker IconName="@BitIconName.HourGlass"
                           IconLocation="BitIconLocation.Left"
                           Placeholder="Select a time..." />
        </div>
    </DemoExample>

    <DemoExample Title="Formatting" RazorCode="@example5RazorCode" Id="example5">
        <div class="example-desc">
            Applications can customize how times are formatted and parsed. Formatted times can be ambiguous, so the control will avoid parsing the formatted strings of times selected using the UI when text input is allowed.
            In this example, we are formatting and parsing times as hh-mm.ss.
        </div>
        <div class="example-content">
            <BitTimePicker Placeholder="Select a time..." ValueFormat="hh-mm.ss" />
        </div>
    </DemoExample>

    <DemoExample Title="Binding" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
        <div>Bind the selected time value of the BitTimePicker to a variable and display the selected time below the picker.</div>
        <br />
        <div class="example-content">
            <BitTimePicker @bind-Value="@selectedTime" Placeholder="Select a time..." />
            <div>Selected time: @selectedTime.ToString()</div>
        </div>
    </DemoExample>

    <DemoExample Title="Standalone" RazorCode="@example7RazorCode" Id="example7">
        <div>Use the BitTimePicker as a standalone component, including options for time format and disabled state.</div>
        <br />
        <div class="example-content">
            <BitTimePicker Standalone Label="Standalone picker" />
            <br />
            <BitTimePicker Standalone
                           Label="Picker (AM/PM)"
                           TimeFormat="BitTimeFormat.TwelveHours" />
            <br />
            <BitTimePicker Standalone
                           Label="Disabled"
                           IsEnabled="false"
                           Value="new(10, 24, 0)"
                           TimeFormat="BitTimeFormat.TwelveHours" />
        </div>
    </DemoExample>

    <DemoExample Title="ReadOnly" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
        <div>The ReadOnly parameter makes the time picker input non-editable, preventing users from manually changing the time value.</div>
        <br />
        <div class="example-content">
            <BitTimePicker Label="Basic" ReadOnly @bind-Value="@readOnlyTime" />
            <br /><br />
            <BitTimePicker Label="Text input allowed" ReadOnly AllowTextInput @bind-Value="@readOnlyTime" />
        </div>
        <br /><br />
        <div class="example-content-standalone">
            <BitTimePicker Label="Standalone" Standalone ReadOnly @bind-Value="@readOnlyTime" />
            <br /><br />
            <BitTimePicker Label="Standalone TimeFormat (AM/PM)" Standalone ReadOnly TimeFormat="BitTimeFormat.TwelveHours" @bind-Value="@readOnlyTime" />
        </div>
    </DemoExample>

    <DemoExample Title="Validation" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
        <div>
            Validation will happen when the <code>Submit</code> button is clicked.
            This example demonstrates how to use the BitTimePicker within a form to validate the selected time.
        </div>
        <br />
        <EditForm Model="formValidationTimePickerModel" OnValidSubmit="HandleValidSubmit" OnInvalidSubmit="HandleInvalidSubmit">
            <DataAnnotationsValidator />
            <div class="validation-summary">
                <ValidationSummary />
            </div>
            <div class="example-content">
                <BitTimePicker @bind-Value="formValidationTimePickerModel.Time"
                               AllowTextInput
                               Label="Time required"
                               AriaLabel="Select a time"
                               Placeholder="Select a time..."
                               InvalidErrorMessage="Invalid Time!" />
                <ValidationMessage For="@(() => formValidationTimePickerModel.Time)" />
            </div>
            <br />
            <BitButton ButtonType="BitButtonType.Submit">
                Submit
            </BitButton>
        </EditForm>

        @if (string.IsNullOrEmpty(successMessage) is false)
        {
            <br />
            <BitMessage Color="BitColor.Success">@successMessage</BitMessage>
        }
    </DemoExample>

    <DemoExample Title="Responsive" RazorCode="@example10RazorCode" Id="example10">
        <div>Enable responsive design for the BitTimePicker, allowing it to adjust its layout and appearance based on the screen size.</div>
        <br />
        <div class="example-content">
            <BitTimePicker Responsive
                           ShowCloseButton
                           Placeholder="Select a time..." />
        </div>
    </DemoExample>

    <DemoExample Title="Templates" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
        <div>Customize the BitTimePicker using templates, including a custom label template with an action button and a custom icon template.</div>
        <br />
        <div class="example-content">
            <BitTimePicker @ref="timePicker" Placeholder="Select a time...">
                <LabelTemplate>
                    Custom label <BitButton Variant="BitVariant.Text" IconName="@BitIconName.AlarmClock" OnClick="OpenCallout"></BitButton>
                </LabelTemplate>
            </BitTimePicker>
            <br /><br />
            <BitTimePicker Label="Custom icon" Placeholder="Select a time...">
                <IconTemplate>
                    <img src="https://img.icons8.com/fluency/2x/clock.png" width="24" height="24" />
                </IconTemplate>
            </BitTimePicker>
        </div>
    </DemoExample>

    <DemoExample Title="Hour/minute step" RazorCode="@example12RazorCode" Id="example12">
        <div>Customize the hour and minute steps in the BitTimePicker, allowing users to increment time by a specified interval.</div>
        <br />
        <div class="example-content">
            <BitTimePicker HourStep="2"
                           Label="HourStep = 2"
                           Placeholder="Select a time..." />
            <br />
            <BitTimePicker MinuteStep="15"
                           Label="MinuteStep = 15"
                           Placeholder="Select a time..." />
        </div>
    </DemoExample>

    <DemoExample Title="Style & Class" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
        <div>Explore styling and class customization for BitTimePicker, including component styles, custom classes, and detailed styles.</div>
        <br /><br />
        <div>Component's Style & Class:</div>
        <br />
        <div class="example-content">
            <BitTimePicker Style="margin: 1rem; box-shadow: dodgerblue 0 0 1rem;" />
            <br />
            <BitTimePicker Class="custom-class" />
        </div>
        <br /><br /><br />
        <div><b>Styles</b> & <b>Classes</b>:</div>
        <br />
        <div class="example-content">
            <BitTimePicker Placeholder="Select a time..."
                           Styles="@(new() { Root = "margin-inline: 1rem;",
                                                 Focused = "--focused-background: #b2b2b25a;",
                                                 Input = "padding: 0.5rem;",
                                                 InputContainer = "background: var(--focused-background);",
                                                 IncreaseHourButton = "color: dodgerblue;",
                                                 DecreaseHourButton = "color: dodgerblue;",
                                                 IncreaseMinuteButton = "color: dodgerblue;",
                                                 DecreaseMinuteButton = "color: dodgerblue;" })" />
            <br />
            <BitTimePicker @bind-Value="@classesValue"
                           Label="Select a time"
                           Classes="@(new() { Root = "custom-root",
                                                  Focused = "custom-focus",
                                                  Input = "custom-input",
                                                  InputContainer = "custom-input-container",
                                                  Label = $"custom-label{(classesValue is null ? string.Empty : " custom-label-top")}",
                                                  IncreaseHourButton = "custom-button",
                                                  DecreaseHourButton = "custom-button",
                                                  IncreaseMinuteButton = "custom-button",
                                                  DecreaseMinuteButton = "custom-button" })" />
        </div>
    </DemoExample>

    <DemoExample Title="RTL" RazorCode="@example14RazorCode" Id="example14">
        <div>Use BitTimePicker in right-to-left (RTL).</div>
        <br />
        <div dir="rtl">
            <div class="example-content">
                <BitTimePicker Dir="BitDir.Rtl"
                               Standalone
                               Label="تایم"
                               Value="new(10, 24, 0)"
                               TimeFormat="BitTimeFormat.TwelveHours" />

                <br />
                <br />

                <BitTimePicker Dir="BitDir.Rtl"
                               ShowCloseButton
                               Label="تایم"
                               Placeholder="تایم خود را انتخاب کنید..." />
            </div>
        </div>
    </DemoExample>
</DemoPage>